<template>
  <div class="article">
    <div
      class="list"
      v-for="item in list"
      :key="item.id"
      @click="$router.push(`/home/articleDetail/${item.id}`)"
    >
      <van-image width="100%" height="400" :src="item.img_url" />
      <!-- 遮盖层 -->
      <div class="cover">
        <div class="cover-title">
          {{ item.title }}
        </div>
        <div class="cover-content">
          {{ item.zhaiyao }}
        </div>
      </div>
    </div>

    <van-empty description="暂无相关资讯" v-if="!list.length" />
  </div>
</template>

<script>
export default {
  props: {
    list: Array,
  },
};
</script>

<style lang="less" scoped>
.list {
  position: relative;
}
.cover-content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 15px;
}
.cover-title {
  font-weight: bold;
  font-size: 15px;
  padding: 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cover {
  color: white;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 30%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
